<template>
  <dv-full-screen-container class="data-view">
    <div class="top-header">
      <dv-decoration-8 class="header-left-decoration" />
      <dv-decoration-5 class="header-center-decoration" />
      <dv-decoration-8 class="header-right-decoration" />
      <div class="center-title" @click="goHome">大屏演示数据</div>
    </div>
    <div class="main-content">
      <div id="digital-flop">
        <div class="digital-flop-item">
          <div class="digital-flop-title">管养里程</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">公里</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">桥梁</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right',style:{fill: '#FC5E65'}}" style="width: 100px; height: 50px;" />
            <div class="unit">座</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">涵洞隧道</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">匝道</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">隧道</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">服务区</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">收费站</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">超限站</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <div class="digital-flop-item">
          <div class="digital-flop-title">停车区</div>
          <div class="digital-flop">
            <dv-digital-flop :config="{ number: [55],textAlign:'right'}" style="width: 100px; height: 50px;" />
            <div class="unit">个</div>
          </div>
        </div>
        <dv-decoration-10 />
      </div>
      <div class="block-left-right-content">
        <div id="ranking-board">
          <div class="ranking-board-title">上报记录数量</div>
          <dv-scroll-ranking-board :config="rankingBoardConfig" style="width: 100%; height: 100%;" />
        </div>
        <div class="block-top-bottom-content">
          <div class="block-top-content">
            <div id="rose-chart">
              <div class="rose-chart-title">累计计量资金分布</div>
              <dv-active-ring-chart :config="activeRingConfig" style="width: 100%; height: 100%;" />
            </div>
            <div id="water-level-chart">
              <div class="water-level-chart-title">计划资金累计完成情况</div>
              <div class="water-level-chart-details">
                累计完成
                <span>235,680</span>元
              </div>
              <div class="chart-container">
                <dv-water-level-pond :config="{ data: [55],shape: 'round'}" />
              </div>
            </div>
            <div id="scroll-board">
              <dv-scroll-board :config="scrollBoardConfig" />
            </div>
          </div>
          <div id="cards">
            <div v-for="item in 5" :key="item" class="card-item">
              <div class="card-header">
                <div class="card-header-left">测试路段0{{ item+1 }}</div>
                <div class="card-header-right">0{{ item }}</div>
              </div>
              <div class="ring-charts">
                <dv-water-level-pond :config="{ data: [66, 45],shape: 'roundRect'}" />
              </div>
              <div class="card-footer">
                <div class="card-footer-item">
                  <div class="footer-title">累计金额</div>
                  <div class="footer-detail">
                    <dv-digital-flop :config="{number: [100],textAlign:'left',style:{fill: '#FC5E65'}}" style="width:70%;height:35px;" />元
                  </div>
                </div>
                <div class="card-footer-item">
                  <div class="footer-title">巡查病害</div>
                  <div class="footer-detail">
                    <dv-digital-flop :config="{number: [60],textAlign:'right'}" style="width:70%;height:35px;" />处
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>
<script>
export default {
  data() {
    return {
      rankingBoardConfig: {
        rowNum: 9,
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      activeRingConfig: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ]
      },
      scrollBoardConfig: {
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        oddRowBGC: 'rgba(10, 29, 50, 0.8)',
        evenRowBGC: 'rgba(0, 44, 81, 0.8)',
        headerBGC: '#4a5dff',
        align: ['center']
      }
    }
  },
  mounted() {
    if (this.T.checkFullScreen() === false) {
      this.$modal.msgWarning('为了更好的体验，请按F11进入全屏模式')
    }
  },
  methods: {
    goHome() {
      this.$router.push({ path: '/' })
    }
  }
}
</script>
<style lang="scss" scoped>
  #dv-full-screen-container {
    background-image:  url(~@/assets/images/big_srceen_bg.png);
    background-size: 100% 100%;
    -webkit-box-shadow: 0 0 3px #00f;
    box-shadow: 0 0 3px #00f;
    display: flex;
    flex-direction: column;
    color: #fff;
  }
  .data-view{
    .top-header{
      position: relative;
      width: 100%;
      height: 100px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      .header-left-decoration, .header-right-decoration {
        width: 25%;
        height: 60px;
      }
      .header-center-decoration {
        width: 40%;
        height: 60px;
        margin-top: 30px;
      }
      .center-title {
        position: absolute;
        font-size: 30px;
        font-weight: 700;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
        color: #fff;
        cursor: pointer;
      }
    }
    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      #digital-flop {
        position: relative;
        height: 15%;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: rgba(6, 30, 93, .5);
        .digital-flop-item {
          width: 11%;
          height: 80%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          border-left: 3px solid #061e5d;
          border-right: 3px solid #061e5d;
          .digital-flop-title {
            font-size: 20px;
            margin-bottom: 20px;
          }
          .digital-flop {
            display: flex;
            .dv-digital-flop{
              width: 100px;
              height: 50px;
              text-align: right;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              font-size: 31px;
              margin-right: 3px;
            }
            .unit {
              display: flex;
              box-sizing: border-box;
              margin-left: 10px;
              align-items: flex-end;
              padding-bottom: 10px;
            }
          }
        }
        .dv-decoration-10 {
          position: absolute;
          width: 95%;
          left: 2.5%;
          height: 5px;
          bottom: 0;
        }
      }
      .block-left-right-content,.block-top-bottom-content {
        flex: 1;
        display: flex;
      }
      .block-left-right-content{
        margin-top: 20px;
        #ranking-board {
          width: 20%;
          box-shadow: 0 0 3px #00f;
          flex-direction: column;
          background-color: rgba(6, 30, 93, .5);
          border-top: 2px solid rgba(1, 153, 209, .5);
          padding: 0 30px;
          display: flex;
          box-sizing: border-box;
          .ranking-board-title {
            font-weight: 700;
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 20px;
          }
          .dv-scroll-ranking-board {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
          }
        }
      }
      .block-top-bottom-content{
        flex-direction: column;
        box-sizing: border-box;
        padding-left: 20px;
        .block-top-content {
          height: 55%;
          display: flex;
          -webkit-box-flex: 0;
          -ms-flex-positive: 0;
          flex-grow: 0;
          box-sizing: border-box;
          padding-bottom: 20px;
          #rose-chart {
            width: 30%;
            height: 100%;
            background-color: rgba(6, 30, 93, .5);
            border-top: 2px solid rgba(1, 153, 209, .5);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            .rose-chart-title {
              height: 50px;
              font-weight: 700;
              text-indent: 20px;
              font-size: 20px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
            }
          }
          #water-level-chart {
            width: 20%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 20px;
            background-color: rgba(6, 30, 93, .5);
            border-top: 2px solid rgba(1, 153, 209, .5);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            .water-level-chart-title {
              font-weight: 700;
              height: 50px;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              font-size: 20px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .chart-container {
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
            }
            .dv-water-pond-level {
              max-width: 90%;
              width: 200px;
              height: 200px;
              border: 10px solid #19c3eb;
              border-radius: 50%;
            }
           .water-level-chart-details {
              height: 15%;
              font-size: 17px;
              -webkit-box-align: end;
              -ms-flex-align: end;
              align-items: flex-end;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
              span {
                font-size: 35px;
                font-weight: 700;
                color: #58a1ff;
                margin: 0 5px;
                margin-bottom: -5px;
              }
            }
          }
          #scroll-board {
            width: 50%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 20px;
            height: 100%;
            overflow: hidden;
          }
        }
        #cards, #cards .card-item {
          display: flex;
        }

        #cards {
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          height: 45%;
          .card-item {
            display: flex;
            background-color: rgba(6, 30, 93, .5);
            border-top: 2px solid rgba(1, 153, 209, .5);
            width: 19%;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            .card-header {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              height: 20%;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              .card-header-left {
                font-size: 18px;
                font-weight: 700;
                padding-left: 20px;
              }
              .card-header-right {
                padding-right: 20px;
                font-size: 40px;
                color: #03d3ec;
              }
            }
            .ring-charts{
              height: 55%;
            }
            .card-footer {
              height: 25%;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -ms-flex-pack: distribute;
              justify-content: space-around;
              .card-footer-item {
                padding: 5px 10px 0 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 40%;
                background-color: rgba(6, 30, 93, .7);
                border-radius: 3px;
                .ring-charts {
                  height: 55%;
                  width: 100%;
                }
                .footer-title {
                  font-size: 15px;
                  margin-bottom: 5px;
                }
               .footer-detail {
                  font-size: 20px;
                  color: #1294fb;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  font-size: 18px;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
